<template>
  <swiper class="swipter-box" ref="mySwiper" :options="swiperOptions">
    <!-- 每日推荐 -->
    <swiper-slide class="content-box" v-for=" item in NavSwipe" :key="item.id">
      <div class="item-max-box">
        <div class="item-box">
          <i class="iconfont" :class="item.icon"></i>
        </div>
        <p class="p">{{item.title}}</p>
      </div>
    </swiper-slide>
    <!-- <div class="swiper-pagination" slot="pagination"></div> -->
  </swiper>
</template>

<script  type='module'>
import { SwiperSlide, Swiper } from 'vue-awesome-swiper'
// import 'swiper/dist/css/swiper.css'

export default {
  name: 'discoverNavSwipe',
  components: {
    Swiper, SwiperSlide
  },
  data () {
    return {
      swiperOptions: {
        // loop: true,
        slidesPerView: 'auto',
        // slidesPerView: 3,
        // spaceBetween: 15,
        freeMode: true,
        // slidesOffsetBefore: 200,
        slidesOffsetAfter: 20
        // pagination: {
        // el: '.swiper-pagination',
        // hideOnClick: true
        // }
        // Some Swiper option/callback...
      },
      NavSwipe: [
        { id: 1, title: '每日推荐', icon: 'icon-rili' },
        { id: 2, title: '排行榜', icon: 'icon-paihangbang' },
        { id: 3, title: '直播', icon: 'icon-airudiantubiaohuizhi-zhuanqu_zhibojian' },
        { id: 4, title: '电台', icon: 'icon-diantai' },
        { id: 5, title: '歌手推荐', icon: 'icon-tuandui' },
        { id: 6, title: '歌单', icon: 'icon-songlist' },
        { id: 9, title: '游戏专区', icon: 'icon-youxi' }
      ]
    }
  },
  computed: {
    swiper () {
      return this.$refs.mySwiper.$swiper
    }
  },
  mounted () {
    this.swiper.slideTo(3, 1000, false)
  }
}
</script>
 <style scoped lang="less">
.swipter-box {
  width: 95%;
  touch-action: none;
  .content-box {
    width: 80px;
    .item-max-box {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 100%;
      text-align: center;
      .item-box {
        display: flex;
        float: left;
        justify-content: center;
        align-items: center;
        height: 46px;
        width: 46px;
        border-radius: 50%;
        background: linear-gradient(to right, #c20c0c 0%, #fb0808 100%);
        .iconfont {
          color: #fafafa;
          font-size: 22px;
        }
      }
      .p {
        color: #000;
        line-height: 22px;
        font-size: 12px;
        margin: 0;
      }
    }
  }
}
</style>
